import 'Base64';
import 'babel-polyfill';

import React from 'react'
import ReactDOM from 'react-dom'

import { Provider } from 'react-redux'
import { Router, Route, IndexRoute } from 'react-router'

import { Test, App, Authenticate, Navigator, BasicOverview,
        TeachingJournal, TempPaper, ChangeThePassword,
        QualityFeedback, HomeWorkManagement, BackToAuthenticate } from './redux/containers';

import { history } from './redux/history'
import { store, DevTools } from './redux/store'

import { AUTHENTICATION } from '../constants/route';

function onEnterHandler(nextState, replace, callback) {
    // TODO: 鉴权
    let { user } = store.getState().authentication;

    if (!user || !user.mobile) {
        replace(AUTHENTICATION);
    };

    callback();
}

ReactDOM.render(
    <Provider store={store}>
        <div>
            <Router history={history}>
                <Route path="/app" component={App}>
                    <IndexRoute component={Navigator} onEnter={onEnterHandler} />
                    <Route path="authenticate" component={Authenticate} />
                    <Route path="navigator" component={Navigator} onEnter={onEnterHandler}>
                        <IndexRoute component={BasicOverview} />
                        <Route path="basicOverview" component={BasicOverview} />
                        <Route path="teachingJournal" component={TeachingJournal} />
                        <Route path="tempPaper" component={TempPaper} />
                        <Route path="qualityFeedback" component={QualityFeedback} />
                        <Route path="homeWorkManagement" component={HomeWorkManagement} />
                        <Route path="ChangeThePassword" component={ChangeThePassword} />
                    </Route>
                    <Route path="backToAuthenticate" component={BackToAuthenticate} />
                </Route>
            </Router>
            { __DEV_TOOLS__ &&  <DevTools /> }
        </div>
    </Provider>,
    document.getElementById('mount')
)